<template>
<div class="c-newv">
    <div class="c-newv-messge">
        <h1>消息</h1>
        <div class="c-newv-sord">
            <div class="c-newv-sord-input">
                <input type="text" v-model="messagesuos" @keyup.enter ="inputFunc">
                <div class="c-newv-souimg">
                 <img src="../../common/image/icon_s.png" alt="">
                </div>
                </div>
            <div class="c-newv-title-bt">
                    <ul>
                        <li :class="xzmessage==1?'secelt':''" @click="messagetb(1)">未读</li>
                        <li :class="xzmessage==0?'secelt':''" @click="messagetb(0)">已读</li>
                        <li :class="xzmessage==3?'secelt':''" @click="messagetb(3)">所有</li>
                    </ul>
                </div>
        </div>
    </div>
    <div class="c-newv-xq">
        <div class="c-newv-xq-k" @scroll="handleScrollmessage($event)">
            <ul class="">
                <li v-for="(item,index) in messagedata" :key="index" @click="seemessage(item.id,index)">
                    <div class="c-newv-xq-content" :class="selectmessage==index?'activetbg':''">
                        <div class="c-newv-xq-contents-hd" v-if="item.readFlag==1"></div>
                        <div class="c-newv-xq-content-img"  v-if="selectmessage!=index"><img :src="item.wxHeadImage" alt=""></div>
                        <div class="c-newv-xq-content-img" v-if="selectmessage==index"><img :src="item.systemHeadImage?item.systemHeadImage:item.wxHeadImage" alt=""></div>
                        <div class="c-newv-xq-content-test">
                            <h3 class="c-newv-xq-content-test-h3" :class="selectmessage==index?'activeth3':''">{{item.messageTitle}}</h3>
                            <div class="c-newv-xq-contents">
                                <div class="c-newv-xq-contents-nr" :class="selectmessage==index?'activetnr':''">{{item.projectName}}</div>
                                <div class="c-newv-xq-contents-time" :class="selectmessage==index?'activetime':''">{{item.publishDate}}</div>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- <li>
                    <div class="c-newv-xq-content activetbg">
                        <div class="c-newv-xq-contents-hd"></div>
                        <div class="c-newv-xq-content-img"><img src="../../common/image/shanfenyuan.png" alt=""></div>
                        <div class="c-newv-xq-content-test">
                            
                            <h3 class="c-newv-xq-content-test-h3 activeth3">您的文件被驳回</h3>
                            
                            <div class="c-newv-xq-contents">
                                <div class="c-newv-xq-contents-nr activetnr">登山节海报的设计登山节海报的设计登山节海报的设计设计登山节海报的设计</div>
                                <div class="c-newv-xq-contents-time activetime">2022-06-08</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="c-newv-xq-content">
                        <div class="c-newv-xq-contents-hd"></div>
                        <div class="c-newv-xq-content-img"><img src="../../common/image/shanfenyuan.png" alt=""></div>
                        <div class="c-newv-xq-content-test">
                            
                            <h3 class="c-newv-xq-content-test-h3">您的文件被驳回</h3>
                            
                            <div class="c-newv-xq-contents">
                                <div class="c-newv-xq-contents-nr">登山节海报的设计登山节海报的设计登山节海报的设计设计登山节海报的设计</div>
                                <div class="c-newv-xq-contents-time">2022-06-08</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="c-newv-xq-content">
                        <div class="c-newv-xq-contents-hd"></div>
                        <div class="c-newv-xq-content-img"><img src="../../common/image/shanfenyuan.png" alt=""></div>
                        <div class="c-newv-xq-content-test">
                            
                            <h3 class="c-newv-xq-content-test-h3">您的文件被驳回</h3>
                            
                            <div class="c-newv-xq-contents">
                                <div class="c-newv-xq-contents-nr">登山节海报的设计登山节海报的设计登山节海报的设计设计登山节海报的设计</div>
                                <div class="c-newv-xq-contents-time">2022-06-08</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="c-newv-xq-content">
                        <div class="c-newv-xq-contents-hd"></div>
                        <div class="c-newv-xq-content-img"><img src="../../common/image/shanfenyuan.png" alt=""></div>
                        <div class="c-newv-xq-content-test">
                            
                            <h3 class="c-newv-xq-content-test-h3">您的文件被驳回</h3>
                            
                            <div class="c-newv-xq-contents">
                                <div class="c-newv-xq-contents-nr">登山节海报的设计登山节海报的设计登山节海报的设计设计登山节海报的设计</div>
                                <div class="c-newv-xq-contents-time">2022-06-08</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="c-newv-xq-content">
                        <div class="c-newv-xq-contents-hd"></div>
                        <div class="c-newv-xq-content-img"><img src="../../common/image/shanfenyuan.png" alt=""></div>
                        <div class="c-newv-xq-content-test">
                            
                            <h3 class="c-newv-xq-content-test-h3">您的文件被驳回</h3>
                            
                            <div class="c-newv-xq-contents">
                                <div class="c-newv-xq-contents-nr">登山节海报的设计登山节海报的设计登山节海报的设计设计登山节海报的设计</div>
                                <div class="c-newv-xq-contents-time">2022-06-08</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="c-newv-xq-content">
                        <div class="c-newv-xq-contents-hd"></div>
                        <div class="c-newv-xq-content-img"><img src="../../common/image/shanfenyuan.png" alt=""></div>
                        <div class="c-newv-xq-content-test">
                            
                            <h3 class="c-newv-xq-content-test-h3">您的文件被驳回</h3>
                            
                            <div class="c-newv-xq-contents">
                                <div class="c-newv-xq-contents-nr">登山节海报的设计登山节海报的设计登山节海报的设计设计登山节海报的设计</div>
                                <div class="c-newv-xq-contents-time">2022-06-08</div>
                            </div>
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>
    </div>
     <projectdetails ref="projectmessage" @chossdetails='gximg' @projectrwsqwc='gximg'></projectdetails>
</div>    
</template>
<script>
import projectdetails from '@/views/news/projectdetails.vue';
import {getWorkMessagePage,getWorkMessageDetails} from '../../api/api'
import { ref,reactive,defineEmits} from 'vue-demi';
export default {
    setup() {
        
        const messagedata=ref([])
        const projectmessage=ref(null)
        // 消息列表类型
        const messagecount=ref(0)
        const xzmessage=ref(1)
        const messagetb = (index)=>{
            datas.value.pageNo=1
            selectmessage.value=-1
            xzmessage.value=index
            if(index==1){
                datas.value.readFlag=1
                
            }else if(index==0){
                datas.value.readFlag=0
            }else{
                 datas.value.readFlag=''
            }
            
             getWorkMessagePage(datas.value).then(res=>{
                console.log(res)
               messagedata.value=res.page.list
               messagecount.value=res.page.count
               
            })
        }
        const gximg=()=>{
            getWorkMessagePage(datas.value).then(res=>{
                console.log(res)
               messagedata.value=res.page.list
               messagecount.value=res.page.count
            })
        }
        const datas= ref({
            receiveUserId:localStorage.getItem('userinfoId'),
            readFlag:1,
            pageNo:1,
            pageSize:10,
            projectName:'',
        })
          if(datas.value.readFlag==1){
            getWorkMessagePage(datas.value).then(res=>{
                console.log(res)
               messagedata.value=res.page.list
               messagecount.value=res.page.count
            })
          }
          const selectmessage=ref(-1)
          const seemessage =(id,index)=>{
            console.log(id,index)
            selectmessage.value=index
            getWorkMessageDetails({userId:localStorage.getItem('userinfoId'),workMessageId:id}).then(res=>{
                console.log(res)
                projectmessage.value.getmessagedata(res)
            })
            
          }
        
        //  const getdatamg=(data)=>{
           

        //  }
        const messagesuos=ref('')
        const inputFunc=()=>{
            console.log(messagesuos.value)
            datas.value.projectName=messagesuos.value
             getWorkMessagePage(datas.value).then(res=>{
                console.log(res)
               messagedata.value=res.page.list
               messagecount.value=res.page.count
            })
        }
        const handleScrollmessage=(e)=>{
            let el = e.target
            console.log( '滚动的高度',el.scrollTop+el.clientHeight ,'到达的高度',el.scrollHeight)
             if(el.scrollTop+el.clientHeight >= el.scrollHeight){
                console.log('已到低')
       	// //控制页数
        //   this.pagesize=this.pagesize+1
        //   //调用后台接口
        //   this.getAuditRecipeList()
        //  const homemessagedatas= ref({
        //     receiveUserId:localStorage.getItem('userinfoId'),
        //     readFlag:1,
        //     pageNo:1,
        //     pageSize:10,
        //     projectName:'',
        // })
        console.log(datas.value.pageNo)
        console.log('messagecount.value',messagecount.value)
        
        if(datas.value.pageNo<Math.ceil(messagecount.value/datas.value.pageSize)){
          
          datas.value.pageNo=parseInt(datas.value.pageNo)+1
         console.log('已到低')
         console.log("页数",datas.value.pageNo)
          console.log("homemessagedatas.value",messagedata.value)
         getWorkMessagePage(datas.value).then(res=>{
              //  homemessagedata.value=homemessagedata.value.push(res.page.list)

                res.page.list.forEach(element => {
                  messagedata.value.push(element)
                });
            }).catch(res => {
              console.log(res)
                ElMessage({
                    message: res,
                    type: 'error',
                })
            });  

        }

         
        }

        }
         
        return {
            handleScrollmessage,
            messagesuos,
            inputFunc,
            gximg,
             selectmessage,
             seemessage,
             messagedata,
             projectmessage,
             messagetb,
             xzmessage,
        }
    },
    components:{
       
        projectdetails,
    }
}
</script>
<style scoped>
.c-newv{
    width: 1511px;
    height: 936px;
    background: #FFFFFF;
    border-radius: 32px;
    margin-top: 120px;
    margin-left: 65px;
    overflow: hidden;
}
.c-newv-messge{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 34px;
}
.c-newv-sord{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 36px;
}
.c-newv-messge h1{
    width: 96px;
    height: 36px;
    font-size: 24px;
    font-weight: bold;
    color: #020113;
    line-height: 36px;
    margin-left: 40px;
}
.c-newv-title-bt ul{
    display: flex;
    background: #F2F5FA;
    border-radius: 20px;
    width: 273px;
    height: 40px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
 }
  .c-newv-title-bt ul li{
    width: 92px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 20px;
    font-weight: 400;
    color: #020113;
 }
 .c-newv-title-bt ul .secelt{
    background: #020113;
    color: white;
 }
 .c-newv-sord-input{
    width: 282px;
    height: 36px;
    background: #F2F5FA;
    border-radius: 18px;
    position: relative;
    margin-right: 26px;
 }
 .c-newv-souimg{
    width: 32px;
    height: 32px;
    position: absolute;
    right: 8px;
    top: 2px;
 }
 .c-newv-souimg img{
    width: 32px;
    height: 32px;
 }
 .c-newv-sord-input input{
    width: 282px;
    height: 36px;
    background: #F2F5FA;
    border-radius: 18px;
    box-sizing: border-box;
    border: none;
    padding: 0 40px 0 10px;
 }
 .c-newv-xq-content{
    width: 1436px;
    height: 132px;
    background: #F2F5FA;
    border-radius: 32px;
    margin-left: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
 }
 .c-newv-xq-content-img{
    width: 80px;
    height: 80px;
    border-radius: 48px;
    margin-left: 35px;
 }
  .c-newv-xq-content-img{
    width: 80px;
    height: auto;
 }
 .c-newv-xq-content-img img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
 }
 .c-newv-xq-content-test{
    width: calc(100% - 80px);
    margin-left: 16px;
 }
 .c-newv-xq-content-test .c-newv-xq-content-test-h3{
    width: auto;
    height: 36px;
    font-size: 18px;
    font-weight: bold;
    color: #020113;
    line-height: 28px;
 }
 .c-newv-xq-contents{
    display: flex;
    justify-content: space-between;
 }
.c-newv-xq-contents .c-newv-xq-contents-nr{
    width: 500px;
    font-size: 14px;
    color: #020113;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.c-newv-xq-contents .c-newv-xq-contents-time{
    font-size: 14px;
    font-weight: 400;
    color: #020113;
    line-height: 22px;
    margin-right: 40px;
}
.c-newv-xq-contents-hd{
    position: absolute;
    right: 20px;
    top: 20px;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: #FF5300;
}
.c-newv-xq{
    margin-top: 36px;
}
.c-newv-xq-k ul li{
    margin: 8px 0px;
}
.c-newv-xq-k{
    width: 1550px;
    height: 780px;
    overflow-y: auto;
}



.c-newv-xq-k ul li .activetbg{
    background-color: #020113;
}
.c-newv-xq-content-test .activeth3{
    color: #FFFFFF;
}
.c-newv-xq-content-test .activetime{
    color: #FFFFFF;
}
.c-newv-xq-content-test .activetnr{
    color: #A4A5AB;
}

</style>

